 <style type="text/css">
 .ellipsis {
      width: 200px;
      
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
            .ellipsis:hover{
            display: block;
            width: 100%;
            overflow: auto;
            white-space: normal;
        }
    .name{
          height: 50px;
    }
    .describe{
    height: 50px;
    }
</style>
<div class="layui-card">
	<div class="layui-card-header">
		<h2 class="header-title">视频教学</h2>
		<span class="layui-breadcrumb pull-right"> <a
			href="#!home_console">首页</a> <a><cite>视频教学</cite></a>
		</span>
	</div>
	<% if(add) { %>
		<div class="layui-card-body">
			<div class="layui-form toolbar">
				<button id="shop-btn-add" class="layui-btn icon-btn">
					<i class="layui-icon">&#xe654;</i>添加视频
				</button>
			</div>
		</div>
	<% } %>
</div>

    <div class="layui-card-body">
        <div class="layui-fluid layadmin-cmdlist-fluid">
            <div class="layui-row layui-col-space30">

				
				<% for(video in videos) { %>
                <div class="layui-col-md2 layui-col-sm4">
                    <div class="cmdlist-container">
                        <img src="assets/images/video.png">
                        
                        <div class="cmdlist-text">
                            
                            <div class="price ellipsis name">
                                <b>名称： ${video.name}</b>
                            </div>
                            <p class="info ellipsis describe">描述：${video.describe}</p>
                            <div class="price">
                                
                                <button class="layui-btn layui-btn-radius layui-btn-fluid layui-btn-sm  layui-btn-danger videoPlayer" data="${video.path}" style="margin-top: 10px;">播放视频</button>
                            	<% if(del) { %>
                                <button videoId="${video.id}" class="layui-btn layui-btn-radius layui-btn-fluid layui-btn-sm layui-btn-normal delVideo" style="margin: 10px 0 0;">删除视频</button>
                                <% } %>
                            </div>
                        </div>
                    </div>
                </div>
				<% } %>
				
  </div></div></div>

        <link rel="stylesheet" href="${ctxPath }/assets/css/template.css" />
<script>
layui.use(
        ['element', 'admin', 'laypage', 'layer', 'util','table','form','ckplayer'],
        function() {
            var element = layui.element,
                $ = layui.$,
                admin = layui.admin,
                laypage = layui.laypage,
                layer = layui.layer,
                table = layui.table,
                form = layui.form,
                ckplayer = layui.ckplayer,
                util = layui.util;


        // 渲染表格


        // 添加按钮点击事件
        $('#shop-btn-add').click(function () {
            showEditModel();
        });
        
        $(document).on('click','.delVideo',function(dom) {
        	var videoId = $(this).attr("videoId");
        	layer.confirm('确定要删除该视频吗？', function() {
				layer.load(2);
				admin.req("service/video/delete", {
					id : videoId
				}, function(data) {
					layer.closeAll('loading');
					if (data.code == 1) {
						layer.msg(data.msg, {
							icon : 1
						});
						location.reload();
					} else {
						layer.msg(data.msg, {
							icon : 2
						});
					}
				}, "post");
			});
        })
        
        $(document).on('click','.videoPlayer',function(dom) {
        	var vUrl =$(this).attr("data");
        	showModel(vUrl);
        })
        
        var showModel = function(url123) {
        	$(".layui-layer-shade").remove();
            $(".layui-layer-page").remove();
		layer.open({
	        type : 1,
	        area: '50%',
        	offset: '5%',
	        title : "视频学习",
	        maxmin : true,
	        btn : [ '关闭视频' ],
	        content : '<div id="videoHhtml" style="width:80%;height:350px;margin:2% auto;border: 10px solid #333;"></div>',
	        success : function(index, layero) {
	        	var vUrl = url123;
	        	var videoObject = {
	            container: '#videoHhtml',
	            loop: true,
	            autoplay: false,
	            video:encodeURI(vUrl)
	        };
	        var player = new ckplayer(videoObject);
	        }
	        });
        };
        
        


        // 显示表单弹窗
        var showEditModel = function (data) {
            var title = '添加视频';
            admin.putTempData('t_video', data);
            var str =  data ? JSON.stringify(data) : " ";
            admin.popupCenter({
            	area: '40%',
            	offset: '10%',
                title: title,
                path: "service/video/editForm?videoId="+ str,
                data:JSON.stringify(data),
                finish: function () {
                    table.reload('video-table', {});
                }
            });
        };
    });
</script>